<template>
	<div class="home">
		<el-container>
			<el-header class="layout-header">
				<p style="font-size: 22px;">悦动精灵管理系统</p>
			</el-header>
			<el-container class="layout-body">
				<el-aside width="200px" class="layout-aside">
					<el-menu :default-active="$router.currentRoute.path" class="el-menu-vertical-demo"
						background-color="#304156" text-color="#fff" active-text-color="#ffd04b" router>
						<el-menu-item index="/announce">
							<i class="el-icon-postcard"></i>
							<span slot="title">公告管理</span>
						</el-menu-item>
						<el-menu-item index="/user">
							<i class="el-icon-user"></i>
							<span slot="title">用户管理</span>
						</el-menu-item>
						<el-menu-item index="/role">
							<i class="el-icon-s-custom"></i>
							<span slot="title">角色管理</span>
						</el-menu-item>
						<el-menu-item index="/permission">
							<i class="el-icon-s-check"></i>
							<span slot="title">权限管理</span>
						</el-menu-item>
                        <el-menu-item index="/permission_role">
							<i class="el-icon-document"></i>
							<span slot="title">角色权限管理</span>
						</el-menu-item>
						<el-menu-item index="/category">
							<i class="el-icon-s-goods"></i>
							<span slot="title">商品类别管理</span>
						</el-menu-item>
						<el-menu-item index="/product">
							<i class="el-icon-goods"></i>
							<span slot="title">商品管理</span>
						</el-menu-item>
						<el-menu-item index="/order">
							<i class="el-icon-s-order"></i>
							<span slot="title">订单管理</span>
						</el-menu-item>
						<el-menu-item index="/plan">
							<i class="el-icon-data-line"></i>
							<span slot="title">计划管理</span>
						</el-menu-item>
						<el-menu-item index="/course">
							<i class="el-icon-school"></i>
							<span slot="title">课程管理</span>
						</el-menu-item>
					</el-menu>
				</el-aside>
				<el-main class="layout-main">
					<router-view />
				</el-main>
			</el-container>
		</el-container>
	</div>
</template>

<script>
	export default {
		data: function() {
			return {}
		},
		methods: {},
		mounted() {

		}
	}
</script>

<style>
	.layout-header {
		line-height: 60px;
		color: #FFF;
		background: #304156;
	}

	.layout-body {
		position: absolute;
		top: 60px;
		bottom: 0;
		right: 0;
		left: 0;
	}

	.layout-aside {
		background: #304156;
	}

	.layout-aside .el-menu {
		border: 0;
	}

	.item {
		padding-bottom: 12px;
	}

	.layout-main {}

	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		cursor: pointer;
		position: absolute;
		top: 5px;
		/* 调整位置以适应头像 */
		right: 20px;
		/* 调整位置以适应头像 */
	}

	.centered-button {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 8px 0;
	}

	.user-info-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 20px;
		margin-bottom: 30px;
	}



	.avatar-container {
		margin-bottom: 20px;
	}

	.info-container {
		width: 100%;
	}

	.info-item {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10px 0;
		text-align: center;
		/* 将信息项内容居中对齐 */
	}

	.info-label {
		font-weight: bold;
		width: 40%;
		text-align: right;
		/* 将标签内容右对齐 */
		margin-right: 10px;
		font-size: 18px;
	}

	.info-value {
		width: 60%;
		text-align: left;
		/* 将值内容左对齐 */
		font-size: 18px;
	}


	.dialog-footer {
		display: flex;
		justify-content: flex-end;
	}
</style>